<template>
  <div class="list-bottom flex">
    <ul class=" flex flex1">
      <li class="flex150"><img src="../../assets/commonImg/dianji201974.png" alt=""><span v-text="allData.ViewCount">32</span></li>
      <li class="flex150"><img src="../../assets/commonImg/shoucang.png" alt=""><span v-text="allData.CollectNumber">32</span></li>
      <li class="flex150"><img src="../../assets/commonImg/xz.png" alt=""><span v-text="allData.DownNumber">32</span></li>
      <li class="flex200 flex"><img src="../../assets/commonImg/pinglun.png" alt=""><star v-if="allData.EvaluatValue||allData.EvaluatValue==0" :score="allData.EvaluatValue.toString()"></star></li>
    </ul>
    <div class="flex text-right pointer ">
      <div class="check pointer" v-if="needCompare"><label ><input  type="checkbox" v-model="checkBox" :class="checkBox?'inputCheck':''"> <span class="pointer" v-text="checkBox?'已加入对比':'加入对比'"></span></label> </div>
      <div  @click="do_collect(allData)"><span v-text="collectTex"></span><span class="collectImg1" :class="allData.IsCollect?'collectImg2':'collectImg1'"></span></div></div>
  </div>
</template>

<script>
  import star from '../common/cm_star'
    export default {
      name: "cm_query-collect-ratStar",
      components: {
        star
      },
      props: {
        needCompare: {
          type: Boolean,
        },
        allData:Object,
        showDetail:Boolean
      },
      data() {
        return {
          checkBox: false,
          collectTex:'',
          collectText:''
        }
      },
      watch:{
        allData(newV,oldV){
          this.collectTex=newV.IsCollect?'取消收藏':'收藏'
        }
      },
      methods:{
        do_collect(item){
          // this.collectItem=item
          // if(!item.IsCollect){
          //   this.collectText="收藏成功！"
          // }else {
          //   this.collectText="取消收藏成功！"
          // }
          this.collectText=item.IsCollect?'取消收藏成功！':'收藏成功！'
          let me =this
          me.$ZcPublic.zcServer.Post({      //退出接口调用
            IsNeedLogin:'true',
            Paras:{
              Name: 'Vue_resultLib',
              Action: 'doCollect_ResultShow',
              Data:{
                SN:item.SN,
                IsCollect:!item.IsCollect
              }
            },
            Callback:me.cb_Collect_ResultShow,
            Scope:me
          })
        },
        cb_Collect_ResultShow(resJson,scope){
          console.log('收藏返回',resJson)
          if(resJson.success){
            this.$toast({
              icon:'ok',
              msg:this.collectText
            })
            let me=this
            setTimeout(()=>{
              me.allData.IsCollect=!me.allData.IsCollect
              this.collectTex=me.allData.IsCollect?'取消收藏':'收藏'
            },1600)
          }else {
            this.$confirm({
              type:"错误",
              msg:resJson.msg,
              btn:{
                ok:'yes',
                no:"no"
              }
            })
              .then(()=>{
                localStorage.setItem("JumpKey", window.location.href);
                this.$router.push('/BS_cgkLogin')
              })
          }
        }
      },
      mounted(){
        // alert(this.allData.IsCollect)
        this.collectTex=this.allData.IsCollect?'取消收藏':'收藏'
      }
      }


</script>

<style scoped>
  input[type="checkbox"]{
    /*margin-left: 10px;*/
    position: relative;
    width: 19px;
    height: 19px;
    background-color: transparent;
    -webkit-appearance: none;
    outline: none;
    border: 1px solid white;
    left: -3px !important;
  }
  input[type="checkbox"]:before{
    font-family: "iconfont" ;
    content: "\e673" ;
    font-size:24px ;
    font-weight: 400 !important;
    color: #408DFE !important;
    cursor: pointer !important;
    display: inline-block !important;
    margin: -2px 0px 0px -10px !important;
    z-index: 99 !important;
    position: absolute !important;
    left: 4px !important;
    top: 3px !important;
  }
  .inputCheck:before{
    font-family: "iconfont" ;
    content: "\e66e" !important;
    font-size:20px !important;
    font-weight: 400 !important;
    color: #408DFE !important;
    cursor: pointer !important;
    display: inline-block !important;
    margin: -2px 0px 0px -10px !important;
    z-index: 99 !important;
    position: absolute !important;
    left: 4px !important;
    top: 3px !important;
  }
  .check{
    margin-right: 60px;
  }
  .list-info,.list-bottom{
    padding-left: 10px;
    color: grey;
    font-size: 14px;
    line-height: 25px;

  }

  .flex150{
    flex: 0 0 150px;
  }
  .flex200{
    flex: 0 0 200px;
  }
  .list-bottom{
    height: 30px;
    align-items: center;
    margin-top: 0;
  }
  .list-bottom>ul,.list-bottom>div{
    height: 30px;
    margin-bottom: 0;
  }
  .list-bottom ul li img{
    width: 16px;
    height: 14px;
    position: relative;
    top: -3px;
    margin-right: 5px;
  }
  .list-bottom li{
    align-items: center;
    height: 30px;
    line-height: 30px;
  }
  .collectImg1,.collectImg2{
    width: 16px;
    height: 16px;
    display: inline-block;
    background:url("../../assets/commonImg/shoucang_weixuanzhong201974.png") center center no-repeat ;
    background-size: 14px 14px;
    margin-left: 5px;
    position: relative;
    top: 2px;
  }
  .collectImg2{
    background:url("../../assets/commonImg/shoucang_xuanzhong201974.png") center center no-repeat ;
    background-size: 14px 14px;
  }
</style>
